<!--  -->
<template>
  <div class="prod-detail">
    <!--  -->
    <div class="nav-btn" @click="router.go(-1)"><van-icon name="arrow-left" /></div>
    <!--  -->
    <van-swipe :autoplay="3000" class="swiper-banner">
      <van-swipe-item v-for="(image, index) in detail.imageUrlList" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <div class="prod-info">
      <van-cell>
        <h1 class="prod-title">{{Number(detail.onSale) ? detail.userTitle : detail.title}}</h1>
        <div class="flex_acenter prod-price">
          <div class="flex__item clr-red">￥<strong>{{detail.price}}</strong></div>
          <div>赚<span class="clr-red">￥32.00</span></div>
        </div>
      </van-cell>
      <!--  -->
      <template v-if="isAdmin">
        <van-cell v-for="(type, idx) in detail.specList" :key="idx">
          <div class="flex_acenter">
            <div class="flex__item"><label class="prod-label">{{type.title}}</label></div>
            <div>{{type.speStr || '-'}}</div>
          </div>
        </van-cell>
        <van-cell>
          <div class="flex_acenter">
            <div class="flex__item"><label class="prod-label">库存</label></div>
            <div class="prod-num">{{ detail.stock }}</div>
          </div>
        </van-cell>
      </template>
      <!--  -->
      <template v-else>
        <van-cell v-for="(type, idx) in detail.specList" :key="idx">
          <div class="flex_acenter">
            <label class="prod-label">{{type.title}}</label>
            <div class="flex__item">
              <!-- danger -->
              <van-radio-group v-model="form[type.title]" class="spec-list">
                <van-radio v-for="(item, index) in type.speBoList" :key="index" :name="item.id">
                  <template #icon="props">
                    <van-button :type="props.checked ? 'danger' : 'default'" size="mini">{{item.title}}</van-button>
                  </template>
                </van-radio>
              </van-radio-group>
            </div>
          </div>
        </van-cell>
        <van-cell>
          <div class="flex_acenter">
            <label class="prod-label">数量</label>
            <div class="flex__item"><van-stepper theme="round" button-size="22" disable-input /></div>
            <div class="prod-num">库存：{{detail.stock}}</div>
          </div>
        </van-cell>
        <van-cell>
          <div class="flex_acenter">
            <div class="flex__item">运费</div>
            <div class="clr-red">￥{{detail.freightPrice}}</div>
          </div>
        </van-cell>
      </template>
      <!--  -->
      <van-cell>
        <div class="prod-desc">
          <h3>商品详情</h3>
          <div v-html="detail.productDesc"></div>
          <!-- <img src="https://picsum.photos/200/300" />
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet adipisci tempora aperiam optio obcaecati tenetur! Consequatur dignissimos quae in fuga at quia atque neque ipsa omnis libero! Dolorum, architecto expedita.</p> -->
        </div>
      </van-cell>
    </div>
    <!--  -->
    <van-action-bar class="footer">
      <div class="prod-collection" @click="handleFaveriate">
        <van-icon name="star" :color="Number(detail.isFaveriate) ? '#FE2E4E' : '#999'" />
      </div>
      <div class="prod-booking">
        <van-action-bar-button v-if="isAdmin"
          :color="Number(detail.onSale) ? '#FE2E4E' : ''"
          :type="Number(detail.onSale) ? 'warning': 'warning'"
          :text="Number(detail.onSale) ? '移出橱窗' : '加橱窗'"
          @click="handleOnSale"
        />
        <van-action-bar-button v-else color="#FE2E4E" type="warning" text="立即购买" @click="toBooking" />
      </div>
    </van-action-bar>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Toast } from 'vant'
import {
  getProductDetail,
  postFaveriate,
  delProductInMyShop,
  addProductToMyShop
} from '@api'

export default {
  name: 'prodDetail',
  setup () {
    const router = useRouter()
    const { pdId, userProductId, admin } = useRoute().query
    const isAdmin = ref(admin)
    // 获取详情
    const detail = ref({})
    getProductDetail({ pdId, userProductId }).then(res => {
      const { content } = res
      console.log(content)
      detail.value = content
    })
    // 收藏
    const handleFaveriate = async () => {
      const isFaveriate = Number(detail.value.isFaveriate)
      const url = isFaveriate ? 'dislike' : 'save'
      postFaveriate(url, { objectId: pdId }).then(res => {
        console.log(url, res)
        detail.value.isFaveriate = isFaveriate ? '0' : '1'
      })
    }
    // 上下架
    const handleOnSale = async () => {
      console.log(detail)
      const { pdId, categoryId, onSale } = detail.value
      const res = Number(onSale)
        ? await delProductInMyShop({ pdIds: pdId })
        : await addProductToMyShop({ pdId, categoryId })
      console.log(res)
      if (res.content) {
        detail.value.onSale = Number(onSale) ? '0' : '1'
      }
    }
    // 立即购买
    const form = reactive({})
    const checked = ref('1')
    const toBooking = () => {
      Toast('功能开发中')
      console.log(form)
    }
    return {
      router,
      isAdmin,
      detail,
      handleFaveriate,
      handleOnSale,
      form,
      checked,
      toBooking
    }
  }
}
</script>

<style>
.van-stepper--round .van-stepper__minus {
  color: #FE2E4E;
  border: 1px solid #FE2E4E;
}
.van-stepper--round .van-stepper__plus {
  background-color: #FE2E4E;
}
</style>
<style scoped lang="scss">
@import './prodDetail.scss';
</style>
